<template>
  <el-col class="com_class">
    <el-col class="jus_title">
      <i class="el-icon-s-opportunity"></i> 权限管理中心
    </el-col>
    <el-table :data="class_list" border stripe size="small">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column
        v-for="col in columns"
        :prop="col.id"
        :key="col.id"
        :label="col.label"
        :width="col.width"
      ></el-table-column>
      <el-table-column label="账号权限">
        <template slot-scope="scope">
          <template v-if="scope.row.permission == 1">
            <span style="color: #409eff; margin-right: 20px">编辑查询</span>
            <span
              style="color: #999999; cursor: pointer"
              @click="limits_of_authority(scope.row)"
              >查询</span
            >
          </template>
          <template v-else>
            <span
              style="color: #999999; margin-right: 20px; cursor: pointer"
              @click="limits_of_authority(scope.row)"
              >编辑查询</span
            >
            <span style="color: #409eff">查询</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="账号状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 1">
            <span style="color: #409eff">启用中</span>
          </template>
          <template v-else>
            <span style="color: #f56c6c">停用中</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="修改状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 1">
            <el-button
              type="warning"
              plain
              size="mini"
              @click="using(scope.row)"
              >停用</el-button
            >
          </template>
          <template v-else>
            <el-button
              type="success"
              plain
              size="mini"
              @click="using(scope.row)"
              >启用</el-button
            >
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="edit_adminfrom(scope.row)"
            type="danger"
            plain
            size="mini"
          >
            <i class="el-icon-edit-outline"></i>
            修改
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="passedit(scope.$index,scope.row)"
            type="danger"
            plain
            size="mini"
          >
            <i class="el-icon-edit-outline"></i>
            修改密码
          </el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <el-col class="class_bottom">
      <el-button type="primary" @click="add_class" size="mini"
        >添加管理员</el-button
      >
    </el-col>

    <el-dialog
      title="添加管理员"
      :visible.sync="admindi"
      width="30%"
      @close="end"
      :modal-append-to-body="false"
      ><el-col class="class_put">
        <el-col :span="5">账号名称:</el-col>
        <el-col :span="18">
          <el-input
            v-model="admin_addfrom.username"
            size="small"
            placeholder="管理员账号名"
            type="text"
          ></el-input>
        </el-col>
      </el-col>
      <el-col class="class_put">
        <el-col :span="5">电话号码:</el-col>
        <el-col :span="18">
          <el-input
            v-model="admin_addfrom.name"
            size="small"
            placeholder="管理员账号"
            type="number"
            maxlength="11"
          ></el-input>
        </el-col>
      </el-col>
      <el-col class="class_put">
        <el-col :span="5">密码:</el-col>
        <el-col :span="18">
          <el-input
            v-model="admin_addfrom.password"
            size="small"
            type="password"
            placeholder="请输入新密码"
          ></el-input>
        </el-col>
      </el-col>
      <el-col class="class_put">
        <el-col :span="5">确认密码:</el-col>
        <el-col :span="18">
          <el-input
            v-model="admin_addfrom.com_password"
            size="small"
            placeholder="请再次确认密码"
            maxlength="11"
            type="password"
          ></el-input>
        </el-col>
      </el-col>
      <span slot="footer">
        <el-button type="primary" @click="adminfrom">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑"
      :visible.sync="edit_admindi"
      width="30%"
      @close="edit_end"
      :modal-append-to-body="false"
      ><el-col class="class_put">
        <el-col :span="5">账号名称:</el-col>
        <el-col :span="18">
          <el-input
            v-model="username"
            size="small"
            placeholder="管理员账号名"
            type="text"
          ></el-input>
        </el-col>
      </el-col>
      <span slot="footer">
        <el-button type="primary" @click="admin_edit_username">确 定</el-button>
      </span>
    </el-dialog>
  </el-col>
</template>
<script>
export default {
  data() {
    return {
      class_list: [],
      addclass: false,
      editclass: false,
      admindi: false,
      edit_admindi: false,
      admin_id: "",
      username:'',
      columns: [
        {
          id: "username",
          label: "账号名称",
        },
        {
          id: "name",
          label: "账号",
        },
      ],

      addform: {
        oldPass: "",
        newPass: "",
        com_Pass: "",
      },
      admin_addfrom: {
        username: "",
        name: "",
        password: "",
        com_password: "",
      },
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    addadmins() {
      this.addclass = true;
      this.editclass = true;
    },
    async getlist() {
      //获取列表
      let res = await this.$store.dispatch("admin_list", "");
      this.class_list = res.data;
    },
    async using(row) {
      this.$confirm("确定要修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.disable_admin(row.id);
        })
        .catch(() => {});
    },
    async limits_of_authority(row) {
      this.$confirm("确定要修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.update_admin_permission(row.id);
        })
        .catch(() => {});
    },
    async editRow() {
      //编辑
      this.addclass = true;
      this.editclass = true;
    },
    async edit_adminfrom(row) {
      //修改密码
      this.$confirm("确定要修改账号名称?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.edit_admindi = true;
          this.admin_id = row.id;
          this.username=row.username
        })
        .catch(() => {
          //   this.$message({
          //     type: "info",
          //     message: "已取消删除"
          //   });
        });
    },
    async adminfrom() {
      if (
        this.admin_addfrom.name &&
        this.admin_addfrom.password &&
        this.admin_addfrom.com_password
      ) {
        let res = await this.$store.dispatch(
          "admin_addadmin",
          this.admin_addfrom
        );
        if (!res.code) {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.end();
        }
      } else {
        this.$message.error("请输入完整表单");
      }
    },
    async disable_admin(id) {
      let data = {
        user_id: id,
      };
      let res = await this.$store.dispatch("disable_admin", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.getlist();
      }
    },
    async update_admin_permission(id) {
      let data = {
        admin_id: id,
      };
      let res = await this.$store.dispatch("update_admin_permission", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.getlist();
      }
    },
    async editsubimit() {
      if (
        this.addform.oldPass &&
        this.addform.newPass &&
        this.addform.com_Pass
      ) {
        let res = await this.$store.dispatch(
          "update_admin_password",
          this.addform
        );
        if (!res.code) {
          this.$message({
            type: "success",
            message: "修改成功",
          });

          this.end();
        }
      } else {
        this.$message.error("请输入完整的内容");
      }
    },

    async admin_edit_username() {
      if (this.username) {
        let data = {
          username: this.username,
          admin_id: this.admin_id,
        };
        let res = await this.$store.dispatch("admin_edit_username", data);
        if (!res.code) {
          this.$message({
            type: "success",
            message: "修改成功",
          });

          this.getlist();
          this.edit_end()
        }
      } else {
        this.$message.error("请输入完整的内容");
      }
    },

    add_class() {
      //   this.addclass = true;
      this.admindi = true;
    },
    // async addsubimit() {
    //   //提交对应的内容
    //   //   console.log(this.addform);
    //   let res = await this.$store.dispatch("add_pick_up", this.addform);
    //   if (res.code == 0) {
    //     this.addclass = false;
    //     this.$message({
    //       type: "success",
    //       message: "创建成功"
    //     });
    //     this.getlist();
    //     this.addform.name = "";
    //     this.addform.address = "";
    //   }
    // },
    end() {
      this.addclass = false;
      this.editclass = false;
      this.admindi = false;

      this.addform.oldPass = "";
      this.addform.newPass = "";
      this.addform.com_Pass = "";
      this.admin_addfrom = {
        name: "",
        password: "",
        com_password: "",
      };
      this.getlist();
    },

    edit_end() {
      this.edit_admindi = false;
      this.username = "";
      this.admin_id = "";
      this.getlist();
    },
  },
};
</script>
<style lang='scss'>
.jus_title {
  text-align: center;
  font-size: 28px;
  padding: 12px 0 12px 0;
  border-bottom: 1px solid #ffffff;
}
</style>